<html lang='zh-CN'>
<head>
<meta charset='utf-8'>
	<style>
		table {
			margin: 100px;
			width: 500px;
			border-collapse: collapse;
			text-align: center;
		}
		
		thead tr{
			height: 40px;
			background-color: #ccc;
		}
		
	</style>
</head>

<body>
	<table>
		<thead>
			<tr>
				<td>name</td>
				<td>subject</td>
				<td>score</td>
				<td>operation</td>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
	
</body>

<script>
// 数据自编
var data = [
{
	name: 'chenlang',
	subject: 'front-end',
	score: 100
},
{
	name: 'david',
	subject: 'English',
	score: 43
},
{
	name: 'tom',
	subject: 'Math',
	score: 89
}
]

var tb = document.getElementsByTagName('tbody')[0];
for (var i=0; i<data.length; i++) {
	var tr = document.createElement('tr');
	
	for (var k in data[i]) {
		var td = document.createElement('td');
		td.innerHTML = data[i][k];
		tr.appendChild(td);
	}
	var remove = document.createElement('td');
	remove.innerHTML = '<button>delete</button>'
	remove.onclick = function () {
		this.parentNode.parentNode.removeChild(this.parentNode);
	}
	tr.appendChild(remove);
	tb.appendChild(tr);
	
}
</script>
</html>